<template>
	<view class="appraise-pad">
		<view class="fw">
			用户评价
		</view>
		<view class="flex width appraise-type">
			<view class="fz appraise-item" :class="{appraiseItemActive:appraiseItemIndex==index}" v-for="item,index in list" :key="item.id" @click="appraiseItemClick(index)">
				{{item.type}}
			</view>
		</view>
		<view class="appraiseDetail iconfont">
			<view class="appraiseDetail-item" v-for="item,index in list[appraiseItemIndex].appraise" :key="item.id">
				<view class="appraiseDetail-top flex">
					<image :src="item.headImg" class="appraiseDetail-pic" mode=""></image>
					<view class="fz ">
						<view class="appraiseDetail-phone">
							{{item.phone}}
						</view>
						<view class="appraiseDetail-star">
							<text class="fz icon-xingxing" v-for="x,y in item.star" :key="y"></text>
						</view>
					</view>
				</view>
				<view class="fz appraiseDetail-text">
					{{item.contain}}
				</view>
				<view class="flex">
					<image :src="j" class="appraiseDetail-img" mode="" v-for="j,i in item.showImg" :key="i"></image>
				</view>
				<view class="fz flex appraiseDetail-time">
					{{item.time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"appraise",
		data() {
			return {
				appraiseItemIndex:0 
			};
		},
		props:{
			list:{
				type:Array,
				default(){
					return[]
				}
			}
		},
		methods:{
			appraiseItemClick(index){
				this.appraiseItemIndex = index
			}
		}
	}
</script>

<style lang="scss">
.appraise-pad {
	overflow: hidden;
	box-sizing: border-box;
	padding: 40rpx 30rpx 32rpx;
	.appraise-type {
		flex-wrap: wrap;
		.appraise-item {
			white-space:nowrap;
			padding: 4rpx 16rpx;
			margin: 15rpx 15rpx 0 0;
			border: 1px solid #c3c3c3;
			border-radius: 15px;
		}
		.appraiseItemActive {
			color: #59B195;
			border: 1px solid #59b195;
			background-color: rgb(238,255,249);
		}
	}
	.appraiseDetail {
		margin-top: 20rpx;
		.appraiseDetail-item {
			margin-top: 20rpx;
			.appraiseDetail-pic {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
			.appraiseDetail-star {
				margin-top: 10rpx;
				color: #f1b32c;
			}
			.appraiseDetail-text {
				letter-spacing: 4rpx;
				line-height: 1.6;
				margin: 25rpx 0 15rpx 0;
			}
			.appraiseDetail-img {
				width: 200rpx;
				height: 200rpx;
				margin-right: 15rpx;
			}
			.appraiseDetail-time {
				color: #b9bbc1;
				margin: 25rpx 0;
				justify-content: flex-end;
			}
		}
	}
}
</style>
